<script setup>
import { ref, watchEffect,toRaw } from 'vue';
import {useQueryStore} from "stores/query.js";
// import {useDataStore} from "stores/data-store.js";
// import {useResultStore} from "stores/result-store.js";
// const resultStore = useResultStore();
// const dataStore = useDataStore();
const bottom = ref('bottom');
const queryStore = useQueryStore();
const dialog = defineModel('dialog')
const tableData = defineModel('tableData')
const selected = ref([])
console.log('tableData',tableData.value)
const columns = [
  {name:'id',label: '编号', field: 'id'},
  {name:'name',label: '地名', field: 'name'},
  {name:'lat',label:'纬度',field:'lat'},
  {name:'lng',label:'经度',field:'lng'},
]
let rows = tableData.value
watchEffect(() => {
  rows=tableData.value
})
const handleSelectionChange = (rows) => {
  let data = rows.rows[0]
  console.log('data',data)
  queryStore.map.flyTo(L.latLng(data.lat, data.lng), 21)
}
</script>

<template>
  <q-dialog v-model="dialog" :position="bottom">
    <div class="q-pa-md">
      <q-table
        title="查询结果"
        :rows="rows"
        :columns="columns"
        row-key="id"
        selection="single"
        v-model:selected="selected"
        @selection="handleSelectionChange"
      />
    </div>
  </q-dialog>
</template>

<style scoped>

</style>
